<template>
  <div>
    <div class="faultHandlingMode zy-content" v-show="!detailVisible">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
          <p class="label">{{$t('任务状态')}}</p>
          <div class="ipt">
            <Select v-model="searchParams.taskStatus" filterable clearable>
              <Option v-for="(item) of taskStatusList" :value="item.id" :key="item.id" :label="item.name"></Option>
            </Select>
          </div>
          </Col>
          <Col span="4">
          <p class="label">{{$t('计划名称')}}</p>
          <div class="ipt">
            <Select v-model="searchParams.planId" filterable clearable @on-query-change="timeOutgetPlanList">
              <Option v-for="(item,index) of planList" :value="item.id" :key="index" :label="item.backupPlanName"></Option>
            </Select>
          </div>
          </Col>
          <Col span="4">
          <p class="label hide-label">--</p>
          <div class="ipt">
            <Button class="search-btn" type="primary" @click="changeNum()" v-has="'inventoryTaskList'">{{$t('common.Query')}}</Button>
            <Button class="reset-btn" @click="reset()" v-has="'inventoryTaskList'">{{ $t('common.reset') }}</Button>
          </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t('common.listInformation') }}</span>
          <Button @click="handleBatchDelete" v-if="selectIds.length" v-has="'dmsBackupTaskDeleteBatch'">{{ $t('common.batchDelete') }}</Button>
          <Button @click="exportTemplateClick" v-has="'dmsBackupTaskExport'">{{ $t('common.batchExport') }}</Button>
          <Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}</Button>
        </div>
        <div class="tableContent">
          <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList" ellipsis :data="dataArr"
                 @on-selection-change="onSelectChange">
            <template slot-scope="{ row }" slot="action">
              <span class="operationBtn" @click="changeDetailVisible(true,row.id)" v-has="'lookinventoryTask'"><i
                   class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}</span>
              <span class="operationBtn" @click="delPrrShowH(row)" v-has="'dmsBackupTaskDeleteBatch'"><i class="iconfont zy-common-shanchu"></i>{{$t('common.Delete')}}</span>
            </template>
          </Table>
        </div>
        <div class="pageWrap mt16">
          <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum"
                @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
      </div>
      <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
        <div class="icon red">
          <i class="iconfont zy-common-shanchu"></i>
        </div>
        <p class="title">
          <span>{{$t('common.confirmDelete')}}</span>
        </p>
        <div slot="footer">
          <Button type="default" @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
          <Button type="primary" :loading="loading" @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
        </div>
      </Modal>
    </div>
    <taskDetail v-if="detailVisible" @changeDetailVisible="changeDetailVisible" :effPlanDetail="effPlanDetail">
    </taskDetail>
  </div>
</template>

<script>
import toggleTableOperation from '@/mixins/toggleTableOperation'
import fileDownload from 'js-file-download'
import taskDetail from './modal/taskDetail.vue'
export default {
  name: 'faultHandlingMode',
  mixins: [toggleTableOperation],
  components: {
    taskDetail
  },
  data() {
    return {
      effPlanDetail: {},
      detailVisible: false,
      planList: [],
      taskStatusList: [
        { id: 0, name: `${this.$t('待盘点')}` },
        { id: 1, name: `${this.$t('已盘点')}` }
      ],
      loading: false,
      searchParams: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          type: 'selection',
          align: 'center',
          width: 60
        },
        {
          title: `${this.$t('任务状态')}`,
          key: 'taskStatusName',
          align: 'center',
          minWidth: 150,
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('计划名称')}`,
          key: 'backupPlanName',
          align: 'center',
          minWidth: 150,
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('任务编号')}`,
          key: 'backupTaskNo',
          align: 'center',
          minWidth: 150,
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('盘点周期')}`,
          key: 'triggerCycleName',
          align: 'center',
          minWidth: 150,
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('触发间隔')}`,
          key: 'triggerInterval',
          align: 'center',
          minWidth: 150,
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('任务生成时间')}`,
          key: 'createTime',
          align: 'center',
          minWidth: 150,
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: 'action',
          minWidth: 200,
          align: 'center',
          fixed: 'right'
        }
      ],
      dataArr: [],
      delFaultCodeShowF: false, //是否显示删除弹窗
      pageSizeOption: [10, 20, 30, 40],
      selectIds: [],
      delIds: []
    }
  },
  created() {
    this.getTableColumnsWidth(this.columns)
    this.searchList()
  },
  mounted() {},
  methods: {
    timeOutgetPlanList(query) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        if (query != '') {
          const index = this.planList.findIndex(val => val.backupPlanName === query)
          if (index === -1) {
            this.getPlanList(query)
          }
        }
      }, 500)
    },
    getPlanList(query) {
      this.axios({
        method: 'get',
        url: '/dms/dmsBackupPlan/queryPlans',
        params: {
          planName: query
        }
      }).then(res => {
        if (res.code === 200) {
          this.planList = res.data
        }
      })
    },
    changeDetailVisible(flag, id) {
      this.detailVisible = flag
      if (!flag) {
        this.searchList()
      }
      if (id) {
        this.getDetail(id)
      }
    },
    getDetail(id) {
      this.axios({
        method: 'get',
        url: '/dms/dmsBackupTask/queryById',
        params: { id }
      }).then(res => {
        if (res.code === 200) {
          this.effPlanDetail = {
            ...res.data,
          }
        }
      })
    },
    reset() {
      this.searchParams = {}
      this.changeNum()
    },
    onSelectChange(selection) {
      let myArray = []
      selection.map(item => {
        myArray.push(item.id)
      })
      this.delIds = myArray
      this.selectIds = myArray
    },
    changeNum() {
      this.pageNum = 1
      this.searchList()
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize
      this.searchList()
    },
    changePageNum(val) {
      this.pageNum = val
      this.searchList()
    },
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      for (let key in this.searchParams) {
        if (this.searchParams[key] || this.searchParams[key] === 0) {
          this.$set(params, key, this.searchParams[key])
        }
      }
      this.axios({
        method: 'post',
        url: '/dms/dmsBackupTask/list',
        data: params
      }).then(res => {
        if (res.code === 200) {
          this.dataArr = res.data.list
          this.total = res.data.total
          this.selectIds = []
        } else {
          this.$Message.warning({ content: res.msg, duration: 6, closable: true })
        }
      })
    },
    //导出
    exportTemplateClick() {
      let params = {}
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key])
        }
      }
      const filName = this.$t('盘点任务')
      this.axios({
        method: 'post',
        url: '/dms/dmsBackupTask/export',
        responseType: 'blob',
        data: {
          ...params
        }
      }).then(res => {
        fileDownload(res, filName + '.xlsx')
      })
    },
    handleBatchDelete() {
      this.delFaultCodeShowF = true
    },
    delPrrShowH(row) {
      this.delFaultCodeShowF = true
      this.delIds = []
      this.delIds.push(row.id)
    },
    deleteOk() {
      this.loading = true
      this.axios({
        method: 'delete',
        url: '/dms/dmsBackupTask/deleteBatch',
        data: {
          ids: this.delIds
        }
      }).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.changeNum()
          this.$Message.success(res.msg)
          this.delFaultCodeShowF = false
        } else {
          this.$Message.warning({ content: res.msg, duration: 6, closable: true })
        }
      })
    }
  }
}
</script>